import { Button, Dropdown, MenuProps } from 'antd';
import { DeleteOutlined, EllipsisOutlined, FolderOpenOutlined, FolderOutlined, FolderViewOutlined, ReloadOutlined } from '@ant-design/icons';
import { DocGroupItem } from '../../../utils/types';
import { makeClassNameList, toastShort } from '../../../utils';

interface Props {
    group: DocGroupItem
    currentFocusDocGroup: DocGroupItem
    currentActiveDocGroup: DocGroupItem
    handleSetCurrentFocusDocGroup: Function
    onReNameDocGroup: Function
    onDeleteDocGroup: Function
    onClickItem: Function
}

const DocGroupItemKit = (props: Props) => {
    const {
        group,
        currentFocusDocGroup,
        currentActiveDocGroup,
        handleSetCurrentFocusDocGroup,
        onClickItem,
        onReNameDocGroup,
        onDeleteDocGroup
    } = props;

    const items: MenuProps['items'] = [
        {
            key: '1',
            label: (
                <div className='flex-row drop-down-item'>
                    <ReloadOutlined
                        className='drop-down-item-icon'
                    />
                    <p className='drop-down-item-name'>重命名</p>
                </div>
            ),
        },
        // {
        //     key: '2',
        //     label: (
        //         <div className='flex-row drop-down-item'>
        //             <FolderViewOutlined
        //                 className='drop-down-item-icon'
        //             />
        //             <p className='drop-down-item-name'>分组权限</p>
        //         </div>
        //     ),
        // },
        {
            key: '3',
            label: (
                <div className='flex-row drop-down-item'>
                    <DeleteOutlined
                        className='drop-down-item-icon'
                        style={{ color: '#ff4d4f' }}
                    />
                    <p
                        className='drop-down-item-name'
                        style={{ color: '#ff4d4f' }}
                    >删除分组</p>
                </div>
            ),
        },
    ];

    const _onOpenChange = (e) => {
        if (e) {
            handleSetCurrentFocusDocGroup && handleSetCurrentFocusDocGroup(group);
        } else {
            handleSetCurrentFocusDocGroup && handleSetCurrentFocusDocGroup(null);
        }
    }

    const onClickDocGrouBtn = ({ key }) => {
        console.log("key", key);
        switch (key) {
            case '1':
                onReNameDocGroup && onReNameDocGroup(group);
                break;
            case '2':
                toastShort('warning', '该分组不可更改权限')
                break;
            case '3':
                onDeleteDocGroup && onDeleteDocGroup(group);
                break;
            default:
                break;
        }
        handleSetCurrentFocusDocGroup && handleSetCurrentFocusDocGroup(null);
    }

    const handleClick = () => {
        onClickItem && onClickItem(group)
    }

    return (
        <div
            onClick={handleClick}
            className={
                makeClassNameList([
                    'flex-row doc-group-item',
                    currentFocusDocGroup && currentFocusDocGroup.id == group.id ? 'hover' : '',
                    currentActiveDocGroup && currentActiveDocGroup.id == group.id ? 'active' : ''
                ])
            }
        >
            <div className='flex-row doc-group-item-left'>
                <div className='flex-row doc-group-item-icon-box'>
                    {
                        currentActiveDocGroup && currentActiveDocGroup.id == group.id ?
                            // <FolderOpenOutlined />
                            <img className='doc-group-item-icon' src={require('./../../../assets/image/small-folder-open.png')}/>
                            :
                            <img className='doc-group-item-icon' src={require('./../../../assets/image/small-folder.png')}/>
                    }
                </div>
                <p
                    className='doc-group-item-name'
                    title={group.name}
                >
                    {group.name ? group.name : '未命名'}
                </p>
            </div>
            {
                group.isDefault ?
                    <div className='default-group-tag'>
                        <p>默认</p>
                    </div>
                    :
                    null
            }
            <Dropdown
                menu={{
                    items,
                    onClick: onClickDocGrouBtn
                }}
                trigger={['click']}
                arrow={false}
                onOpenChange={_onOpenChange}
            >
                <Button
                    type={'text'}
                    icon={<EllipsisOutlined />}
                    className='doc-group-item-option'
                    size={'middle'}
                />
            </Dropdown>

        </div>
    )
}

export default DocGroupItemKit;